<template>
  <div
    style="height:100%;"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <div class="table_resource" style="text-align: center;height: 97%;">
      <el-table
        :data="showTable"
        border
        height=100%
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        stripe
      >
        <el-table-column prop="gh" label="工号" width="200"> </el-table-column>
        <el-table-column prop="xm" label="姓名"> </el-table-column>
        <el-table-column prop="bm" label="部门">
          <template slot="header">
            <el-select v-model="selectkey" filterable placeholder="请选择部门">
              <el-option label="所有部门" value="所有部门">所有部门</el-option>
              <el-option
                v-for="item in departments"
                :key="item.depId"
                :label="item.depName"
                :value="item.depName"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column fixed="right" width="400">
          <template slot="header">
            <input
              v-model="keywords"
              placeholder="请输入教师姓名或者工号"
              class="el-input__inner"
            />
          </template>
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.operateAdmin"
              @change="setDepAdmin(scope.row)"
            >
            </el-switch>
          </template>

        </el-table-column>
      </el-table>
    </div>

    <div class="resource-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15,20,25]"
        :page-size="pagesize"
        :pager-count="5"
        layout=" prev, pager, next,sizes, jumper"
        :total="filterDataShow.length"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectkey: "所有部门", //下拉菜单关键字
      keywords: "", // 搜索的关键字
      filterDataShow: [], //储存符合条件的数据
      departments: [],
      tableData: [],
      pagesize: 25,
      currentPage: 1,
      loading:true
    };
  },
  computed:{
  },
  mounted() {
    this.getDepartmentAxios();
    this.getDataAxios();
  },
  methods: {
    //设置部门管理员
    setDepAdmin(row){
      this.$api.admin.setDepartmentAdmin({
        depId:row.bmbh,
        gh:row.gh,
        type:1
        }).then((res)=>{
        console.log(res)
        if(res.data.code==4013){
          this.$message({
            message: "该部门已有管理员!",
            type: "warning",
            offset: screen.height / 2 - 100,
            center: true
          })
        }
        this.getDataAxios()
      })
    },
    getDepartmentAxios() {
      let that = this;
      this.$api.department
        .getSchoolDepartments({})
        .then(function (response) {
          console.log(response);
          that.departments = response.data.data.departments;
          that.searchResource();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //获取批次数据
    getDataAxios() {
      let that = this;
      this.$api.teacher
        .getAllTeacherInfo({})
        .then(function (response) {
          console.log(response)
          that.tableData = response.data.data;
          that.loading=false
          that.searchResource();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //查询
    searchResource() {
      this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
      let filterKeywords = this.keywords.trim();
      let filerReasource = this.tableData.filter((item) => {
        //过滤全部数据
        if (
          item.xm.includes(filterKeywords) &&
          (item.bm.includes(this.selectkey) || this.selectkey == "所有部门")
          || item.gh.includes(filterKeywords) &&
          (item.bm.includes(this.selectkey) || this.selectkey == "所有部门")
        ) {
          return item;
        }
      });
      this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleDelete(index, row) {
      console.log(row);
    },
  },
  watch: {
    //监听搜索框内容，当搜索框内容发生变化时调用searchResource方法
    keywords() {
      this.searchResource();
    },
    selectkey() {
      this.searchResource();
    },
  },
  computed: {
    //showTable计算属性通过slice方法计算表格当前应显示的数据
    showTable() {
      return this.filterDataShow.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },
  },
};
</script>
<style scoped>
#find {
  width: 400px;
  margin-bottom: 30px;
}
</style>
